<template>
	<div>
		<div class="article-list">
			<YRCardTitle :title="queryParams.params.kw?'搜索：'+this.queryParams.params.kw:'技术博客'"></YRCardTitle>
			<div class="article-main">
				<div class="article-content" v-for="(item, index) in articleList" :key="index">
					<h1 class="art-title">
						<a @click="toArticleContent(item)"><span v-html="item.title"/></a>
					</h1>
					<div class="art-content">
						<a v-show="item.cover" @click="toArticleContent(item)"><div class="bg-img" :style="{ backgroundImage: 'url(' + item.cover + ')' }"></div></a>
						<p class="desc"><span v-html="item.description"/></p>
					</div>
					<div class="art-footer">
						<time class="bot">
							<Icon type="md-clock" />
							{{ item.createTime | dateformatDate }}
						</time>
						<span class="bot">
							<Icon type="md-eye" />
							{{ item.readNum }}次阅读
						</span>
						<span class="bot">
							<Icon type="md-chatboxes" />
							{{ item.commentSum }}条评论
						</span>
						<template v-for="(tag, tagIndex) in item.yrTags">
							<Tag fade :color="tag.color" v-if="tag.name" :key="tagIndex">{{ tag.name }}</Tag>
						</template>
					</div>
				</div>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</div>
		</div> 
		<div class="page">
			<Page :total="total" v-if="queryParams.params.kw" :current="articlePageCurrent" :page-size="queryParams.size" @on-change="searchArticle" />
			<Page :total="total" v-else :current="articlePageCurrent" :page-size="queryParams.size" @on-change="pageArticle" />
		</div>
	</div>
</template>

<script>
import { mapMutations,mapGetters } from 'vuex';
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import { pageArticle, addArticleReadNum } from '@/api/article';
import { searhPageArticle } from '@/api/search';
export default {
	name: 'ArticleList',
	components: {
		YRCardTitle
	},
	props: {
		title: String
	},
	data: () => {
		return {
			total: 0,
			queryParams: {
				size: 5,
				params: {
					kw:undefined,
					tagId: undefined,
					type: 1 //技术博客
				}
			},
			articleList: [],
			spinShow: false //加载中
		};
	},
	computed: {
		...mapGetters({
			articlePageCurrent: 'base/articlePageCurrent'
		})
	},
	methods: {
		...mapMutations({
			setArticlePageCurrent: 'base/setArticlePageCurrent'
		}),
		initArticle(current){
			if(this.$route.query.kw){
				this.queryParams.params.kw = this.$route.query.kw;
				this.searchArticle(current);
			}else{
				this.queryParams.params.tagId = this.$route.query.tagId;
				this.queryParams.params.kw = undefined;
				this.pageArticle(current);
			}
		},
		searchArticle(current){
			this.spinShow = true;
			this.setArticlePageCurrent(current || 1)
			this.queryParams.current = this.articlePageCurrent;
			searhPageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = res.data.records;
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		pageArticle(current) {
			this.setArticlePageCurrent(current || 1)
			this.queryParams.current = this.articlePageCurrent;
			this.spinShow = true;
			pageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = res.data.records;
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		toArticleContent(item) {
			addArticleReadNum(item.id);
			this.$router.push({ path: `/article/articleContent`, query: { id: item.id } });
		}
	},
	created() {
		this.initArticle(this.articlePageCurrent);
	},
	watch: {
		$route() {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.initArticle(1);
		}
	}
};
</script>

<style lang="stylus" scoped>
.ivu-tag
	height 18px
	line-height 18px
	opacity 0.6
.article-list
	height 100%
	background #fff
	border-radius 10px
	min-height 60vh
	position relative
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	.article-main
		position relative
		min-height 65vh
		background #fff
		border-radius 0 0 10px 10px
		overflow hidden
		.article-content
			width 100%
			padding 20px 20px 0px
			border-top 1px solid #eee
			box-shadow none
			border-radius 0px
			position relative
			.art-title
				font-size 22px
				font-weight 400
				line-height 30px
				white-space nowrap
				display inline
				vertical-align baseline
				transition background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)
				background-size 100% 150%
				a
					color #444
			.art-title:hover
				background-size 100% 100%
				background-image linear-gradient(to top, transparent, transparent 0, #fd0 0, #fd0 7px, transparent 7px)
			.art-content
				font-size 14px
				margin 0
				margin-top 5px
				color #696969
				line-height 24px
				letter-spacing 1px
				overflow hidden
				min-height 80px
				.desc
					letter-spacing 1px
					overflow hidden
					text-overflow ellipsis
					display -webkit-box
					-webkit-line-clamp 4
					-webkit-box-orient vertical
				.bg-img
					float right
					margin-left 10px
					margin-bottom 10px
					height auto
					height 100px
					width 140px
					box-sizing border-box
					border 0
					transition all 0.2s ease-in
					opacity 0.85 !important
					background-size cover
					background-position center
					background-repeat no-repeat
					border-radius 5px
					box-shadow 0 0 0 1px rgba(188, 188, 188, 0.01), 0 4px 10px rgba(0, 0, 0, 0.06)
				.bg-img:hover
					opacity 1 !important
			.art-footer
				width 100%
				height 30px
				.bot
					color #8f8f8f
					font-size 14px
					padding-right 15px
					cursor pointer
				.tag
					margin 0 10px
.page
	width 100%
	text-align center
	padding-top 15px
</style>
